import React from 'react';
import { observer } from 'mobx-react';
import {WeaRightMenu,WeaDialog,WeaFormItem,WeaLocaleProvider } from 'ecCom';
import { WeaForm,WeaSwitch } from 'comsMobx';
import * as FnaButton from '../../public/FnaButton'
const getLabel = WeaLocaleProvider.getLabel;

/**
* 存为模板Modal
*/
@observer
class SaveToTemple extends React.Component {
	constructor(props) {
        super(props);
        this.form = new WeaForm();
        this.conditions =  [
          {
              "items": [
                  {
                      "colSpan": 2,
                      "conditionType": "INPUT",
                      'rules': `required|string`,
                      "domkey": [
                          "templeName"
                      ],
                      "fieldcol": 12,
                      "isQuickSearch": true,
                      "label": getLabel(28050,'模板名称'),
                      "labelcol": 6,
                      "value": "",
                      "viewAttr": 3,
                      'inputType':'multilang'
                  }
              ]
          }
      ];
  }

  componentDidMount(){
    
  }

  componentWillReceiveProps(nextProps) {
    const {visible} = nextProps;

    if(!this.visible && visible){
      this.form = new WeaForm();
      this.form.initFormFields(this.conditions);;
    } else if(this.props.visible && !visible){

    }
    
  }

  shouldComponentUpdate(nextProps, nextState) {
      return true;
  }

  componentWillUnmount() {
    //组件卸载时一般清理一些状态

  }


	render(){
    const { visible} = this.props;
    const { form,conditions } = this;
    const { isFormInit } = form;
    let title = getLabel(127365,'存为模板');

		return(
				<WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@3dvcry`}
              icon='icon-coms-Finance'
              iconBgcolor='#f14a2d'
			        title={title}
			        visible={visible}
			        style={{width:550}}
              maskClosable={false}
              onCancel={this.handleCancel}
        			buttons={this.getBottomButton(this.props.ecId || '')}
              moreBtn={{datas:this.getRightMenu(),collectParams:{favname:title, favouritetype:5}}}
		    >
		    
        <WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@jufpj5`} 
          datas={this.getRightMenu()}
          collectParams={{favname:title, favouritetype:5}}
         >
            {
                isFormInit &&
                <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@a4zn4v`}
                    label={getLabel(28050,'模板名称')}
                    labelCol={{span:5,offset:3}}
                    wrapperCol={{span:13}}
                    error={form.getError(conditions[0].items[0])}
                    tipPosition="bottom"
                    style={{padding : '30px 0'}}
                >
                    <WeaSwitch ecId={`${this && this.props && this.props.ecId || ''}_WeaSwitch@zzd4pv`} fieldConfig={conditions[0].items[0]} form={form}/>
                </WeaFormItem>
            }
          </WeaRightMenu>
   			</WeaDialog>
		)
	}

  //右下角点击按钮
  getBottomButton = (ecId) => {
    let buts=[];
    
    buts.push(FnaButton.getPrimaryButton(this.save,false,getLabel(384114,'保存'),ecId+'_save_SaveToTemple'));
    return buts;
  }
  
  //右键菜单
  getRightMenu = () => {
    let btns = [];

    btns.push({
      key:"save",
      icon: <i className='icon-coms-Preservation'/>,
      content:getLabel(384114,'保存'),
      disabled:false,
      onClick:()=>{this.save();}
    });

    return btns;
  }
  
  //取消
  handleCancel = () => {
    const {close} = this.props;
    close();
  }

  //保存
  save = () => {
    const { form } = this;

    form.validateForm().then( f => {
      if(f.isValid){
        let params = form.getFormParams();
        console.log('params',params);
      }else{
        f.showErrors();
      }
    });
  }
}

export default SaveToTemple;